<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <base href="http://hefengxian.github.io/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>群成员生日表</title>

    <link rel="shortcut icon" href="assets/site/images/favicon.ico" />

    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/site/css/site.css">

    <script src="assets/libs/art-template/template.js"></script>
    <script src="http://cdn.bootcss.com/require.js/2.1.20/require.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="assets/libs/require-js/main-cdn.js"></script>
    <script src="assets/site/js/site.js"></script>
</head>
<body>
<div class="container">
    <div id="_navbar"></div>

    <div id="_content">
        <br>
        <h3 class="header">
            <i class="fa fa-birthday-cake"></i>&nbsp;
            群成员生日表
            <small>已经实现可以按各种条件排序</small>
        </h3>

        <hr>
        <table id="example" class="table table-bordered table-striped table-curved" style="clear: both;"></table>
    </div>


    <div id="_footer"></div>
</div>
</body>
<script>
    $(document).ready(function () {
        require(['dt-bs'], function () {
            $('#example').DataTable({
                dom: "frtp",
                order: [[4, 'asc']],
                ajax: "data/birthday.json",
                aLengthMenu: [10, 20, 25, 50, 100],
                columns: [
                    {
                        title: '姓名',
                        data: 'name',
                        orderable: false,
                        className: 'text-center',
                    },
                    /*{
                        title: '外号',
                        data: 'nickname',
                        className: 'text-center',
                    },*/
                    {
                        title: '性别',
                        name: 'gender',
                        data: "gender",
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (data.toLowerCase() == 'm') {
                                return '<i class="fa fa-mars" title="抠脚大汉"></i>';
                            }
                            return '<i class="fa fa-venus" title="萌妹纸"></i>';
                        }
                    },
                    {
                        title: '<i class="fa fa-birthday-cake"></i>&nbsp;生日(农历)',
                        data: "birthday",
                        className: 'text-center',
                        render: function(data) {
                            return data.split(' ')[0];
                        }
                    },
                    {
                        title: "出生年",
                        data: "birth_year",
                        className: 'text-center'
                    },
                    {
                        title: "出生月",
                        data: "birth_month",
                        className: 'text-center'
                    },
                    {
                        title: '出生日',
                        data: "birth_day",
                        className: 'text-center'
                    }
                ]
            });
        });
    });
</script>
</html>